<template>
  <common-container
    :id="id"
    :item="item"
    :item-config="itemConfig"
    @click.stop="selectItem(item)"
    @delete-item="deleteItem"
    @copy-item="copyItem"
  >
    <a-tabs
      :size="config.size"
      :type="config.type"
      :position="config.position"
      :trigger="config.trigger"
      :justify="config.justify"
      :animation="config.animation"
      :hide-content="config.hideContent"
      :header-padding="config.headerPadding"
      @change="tabChange"
    >
      <template v-for="(tab, index) in item.formList" :key="index">
        <tab-container
          v-model:list="tab.formList"
          v-model:model="formModel"
          :id="tab.id"
          :item="tab"
          :item-config="tab.itemConfig"
          :config="tab.config"
          @select-item="selectItem"
          @delete-item="deleteItem"
          @copy-item="copyItem"
        />
      </template>
    </a-tabs>
  </common-container>
</template>

<script lang="ts" setup>
import { defineEmits, defineModel, defineProps, inject } from 'vue';
import CommonContainer from '@/components/form-design/form-container/container-item/common-container.vue';
import TabContainer from '@/components/form-design/form-container/container-item/tab-container.vue';

const formModel = defineModel();

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const selectItem = (value: any) => {
  emits('selectItem', value);
};

const deleteItem = (value: any) => {
  emits('deleteItem', value);
};

const copyItem = (value: any) => {
  emits('copyItem', value);
};

const formInstance = inject('formInstance');

const tabChange = (value: any) => {
  if (props.config.onChangeFunction) {
    try {
      const callBack = new Function('value', props.config.onChangeFunction);
      callBack.call(formInstance, value);
    } catch (e) {
      console.error(e);
    }
  }
};
</script>

<script lang="ts">
export default {
  name: 'TabsContainer'
};
</script>

<style lang="less" scoped>
@import "common-container";
</style>